<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-15 17:05
  PageName：c_Text_Overflow.html
  Function：CSS3新增文本样式 - 溢出文本
  URL：http://localhost:8080/e3_webpage_CSS3_TextStyle/c_Text_Overflow.html
-->

<head>
    <meta charset="UTF-8">
    <title>CSS3新增文本样式 - 溢出文本</title>

    <style type="text/css">
        /* 定义新闻栏目外框，设置固定宽度 */
        dl {
            width: 240px;
            border: solid 1px #ccc;
        }

        /* 设计新闻栏目标题行样式 */
        dt {
            padding: 8px 8px;
            background: #7FECAD url(images/green.gif) repeat-x;
            font-size: 13px;
            text-align: left;
            font-weight: bold;
            color: #71790C;
            margin-bottom: 12px;
            border-bottom: solid 1px #efefef;
        }

        /* 设置新闻列表项样式 */
        dd {
            font-size: 0.78em;
            height: 1.5em;
            width: 220px;
            padding: 2px 2px 2px 18px;                           /* 为添加新闻项目符号腾出空间 */
            background: url(images/icon.gif) no-repeat left 25%; /* 以背景方式添加项目符号 */
            margin: 2px 0;
            white-space: nowrap;                          /* 为应用text-overflow做准备，禁止换行 */
            overflow: hidden;                             /* 为应用text-overflow做准备，禁止文本溢出显示 */
            -o-text-overflow: ellipsis;                   /* 兼容Opera */
            text-overflow: ellipsis;                      /* 兼容IE, Safari (WebKit) */
            -moz-binding: url('ellipsis.xml#ellipsis');   /* 兼容Firefox */
        }
    </style>
</head>

<body>
<dl>
    <dt>互联网科技看点</dt>
    <dd>Intel内部经验：做酷炫拽的智能硬件，你需要考虑到这几点</dd>
    <dd>听小平老师讲了很多大道理，股权还是分不好？</dd>
    <dd>控股了，真就控制了公司了？——雷士照明斗殴抢公章的思考</dd>
    <dd>融到A轮的90后创业者应该是什么样的面相？（《伏牛传》之八）</dd>
    <dd>“万能”的BAT，依然做不好O2O</dd>
</dl>
</body>
</html>